import React from 'react';
import {
  Form, SelectBox, Select, Tooltip, NumberField, Icon,
} from 'choerodon-ui/pro';
import { observer } from 'mobx-react-lite';
import Tips from '@/components/new-tips';

const Index = observer(({
  ds,
}: any) => {
  const renderDomBaseOnTaskType = () => {
    if (ds.current?.get('taskType') === 'task') {
      return (
        <>
          <Select
            newLine
            colSpan={1}
            searchable
            searchMatcher="task_name"
            name="apiTestTaskId"
            optionRenderer={({ record, text }) => {
              if (!record?.get('executeOnline')) {
                return (
                  <Tooltip title="含有自定义脚本，无法选择">
                    {text}
                  </Tooltip>
                );
              }
              return text;
            }}
            onOption={({ record }) => ({
              disabled: !record?.get('executeOnline'),
            })}
            addonAfter={<Tips helpText="此处仅能从项目下已有的API测试任务中进行选择" />}
          />
          <Select colSpan={1} name="apiTestConfigId" />
        </>
      );
    }
    return (
      <Select
        name="apiTestSuiteId"
        colSpan={1}
        newLine
      />
    );
  };

  return (
    <>
      <Form dataSet={ds} columns={2}>
        <SelectBox name="taskType" />
        {
        renderDomBaseOnTaskType()
      }
        <SelectBox newLine colSpan={1} name="whetherDelay" />
        {
        ds.current?.get('whetherDelay') && (
          <NumberField
            name="startIn"
            suffix="分钟"
          />
        )
      }
      </Form>
      <div className="addcdTask-divided" />
      <p className="addcdTask-title">
        告警设置
        <Tooltip title="启用告警设置后，若该API测试任务的执行率低于某个设定值，便会通过邮件或站内信通知到指定的通知对象。">
          <Icon
            style={{
              position: 'relative',
              bottom: '2px',
              marginLeft: '5px',
              color: 'rgba(0, 0, 0, 0.36)',
            }}
            type="help"
          />
        </Tooltip>
      </p>
      <Form dataSet={ds} columns={2}>
        <SelectBox colSpan={1} name="enableWarningSetting" />
        {
          ds.current?.get('enableWarningSetting') && (
            <>
              <NumberField
                colSpan={1}
                name="performThreshold"
                newLine
                suffix="%"
                step={1}
                min={0}
                max={100}
                addonAfter={
                  <Tips helpText="即指定一个执行成功率的标准值，若后续在流水线中执行该API测试任务后成功率低于设定值，便会告警通知到指定人员。仅能填入0-100。" />
              }
              />
              <Select
                searchable
                searchMatcher="param"
                newLine
                name="notifyUserIds"
                addonAfter={<Tips helpText="可选择项目下任意人员作为通知对象。" />}
              />
              <SelectBox newLine name="notifyWay" />
              <div className="addcdTask-whetherBlock" style={{ position: 'relative' }}>
                <SelectBox name="blockAfterJob" />
                <Tooltip
                  title={(
                    <>
                      <p>
                        若选择为是，则表示API测试任务执行成功率低于设定值后，后续的阶段与任务将被阻塞，不会执行。
                      </p>
                      <p>
                        若选择为否，则表示无论执行成功率如何，此任务执行完成后，均会继续执行接下来的阶段或任务。
                      </p>
                    </>
                )}
                >
                  <Icon
                    style={{
                      position: 'absolute',
                      top: '5px',
                      left: '170px',
                      color: 'rgba(0, 0, 0, 0.36)',
                    }}
                    type="help"
                  />
                </Tooltip>
              </div>
            </>

          )
        }
      </Form>
    </>

  );
});

export default Index;
